page{
	 background-color: #F0F0F3 !important;
}
.index{
  padding-top: 40rpx;
  background: #F0F0F3;
  height: 100%;
}
.index-tab{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 670rpx;
  height: 100rpx;
  margin: 0 auto;
  padding:  0 12rpx;
  background: #F0F0F3;
  box-shadow: inset 10rpx 10rpx 8rpx rgba(174, 174, 192, 0.5), inset -10rpx -10rpx 8rpx rgba(255, 255, 255, 0.5);
  border-radius: 100rpx;
  margin-bottom: 30rpx;
}
.tab-left{
	width: 324rpx;
	height: 84rpx;
	font-size: 28rpx;
	text-align: center;
	line-height: 84rpx;
	color: #B1B3B6;
	background: #F0F0F3;
	border-radius: 40rpx;
}
.tab-right{
  width: 324rpx;
  height: 84rpx;
  font-size: 28rpx;
  text-align: center;
  line-height: 84rpx;
  color: #B1B3B6;
  background: #F0F0F3;
  border-radius: 40rpx;
}
.tab-left.active{
	box-shadow: -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.4), 10rpx 10rpx 20rpx rgba(174, 174, 192, 0.2), inset -4rpx -4rpx 8rpx rgba(0, 0, 0, 0.1), inset 4rpx 4rpx 8rpx #FFFFFF;
	color: #FB7575;
}
.tab-right.active{
  box-shadow: -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.4), 10rpx 10rpx 20rpx rgba(174, 174, 192, 0.2), inset -4rpx -4rpx 8rpx rgba(0, 0, 0, 0.1), inset 4rpx 4rpx 8rpx #FFFFFF;
  color: #FB7575;
}
.index-line{
  width: 750rpx;
  height: 2rpx;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx -2rpx 20rpx rgba(255, 255, 255, 0.25);
  margin-bottom: 40rpx;
}
.index-item{
  width: 670rpx;
  height: 80rpx;  
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #F0F0F3;
  border: 4rpx solid rgba(255, 255, 255, 0.2);
  box-shadow: inset -8rpx -4rpx 16rpx #FFFFFF, inset 8rpx 4rpx 16rpx rgba(189, 195, 197, 0.68);
  border-radius: 40rpx;
  padding: 0 12rpx 0 30rpx;
  margin-bottom: 40rpx;
}
.item-left{
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}
.item-left image{
  width: 38rpx;
  height: 36rpx;
}
.item-left.image image{
  width: 34rpx;
  height: 38rpx;
}
.item-right{
  width: 540rpx;
  height: 74rpx;
}
.item-right input{
  width: 540rpx;
  height: 74rpx;
  line-height: 80rpx;
  color: #808B9F;
}
.item-right{
	&.btn{
		width: 400rpx;
		input{
		  width: 400rpx;
		  height: 74rpx;
		  line-height: 80rpx;
		  color: #808B9F;
		}
	}
	
} 
.item-btn{
  width: 144rpx;
  height: 56rpx;
  background: #f0f0f3;
  border-radius: 66rpx;
  box-shadow: 3rpx 3rpx 6rpx 0px rgba(174,174,192,0.40), -2rpx -2rpx 6rpx 0rpx #ffffff; 
}
.item-btn button{
  width: 144rpx !important;
  height: 56rpx !important;
  font-size: 24rpx;
  color: #808B9F;
  font-weight: 400;
  line-height: 56rpx;
  padding: 0 !important;
  background:  #f0f0f3;
  border-radius: 66rpx;
  box-shadow: 3rpx 3rpx 6rpx 0px rgba(174,174,192,0.60), -2rpx -2rpx 6rpx 0rpx #ffffff; 
}
.item-btn button::after{
  border: none;
}
.follow{
  width: 670rpx;
  height: 60rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f3;
  border-radius: 114rpx;
  box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(174,174,192,0.40), -2rpx -2rpx 6rpx 0rpx #ffffff; 
  margin-top: 10rpx;
  margin-bottom: 50rpx;
}
.follow-item{
  width: 654rpx;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 24rpx;
  font-weight: 500;
  text-align: center;  
  color: #808B9F;
  background: #f0f0f3;
  border-radius: 88rpx;
  box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(174,174,192,0.20) inset, -2rpx -2rpx 2rpx 0rpx rgba(255,255,255,0.70) inset; 
}
.step{
  width: 670rpx;
  height: 150rpx;
  margin: 0 auto;
  margin-bottom: 40rpx;
  color: #808B9F;
}
.step.end{
  margin: 0 auto;
}
.step-top{
  height: 80rpx;
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.step-t-l{
  width: 72rpx;
  height: 72rpx;
  text-align: center;
  line-height: 72rpx;
  background: #f0f0f3;
  border-radius: 40rpx;
  box-shadow: 10rpx 10rpx 20rpx 0rpx rgba(174,174,192,0.30), -10rpx -10rpx 20rpx 0rpx #ffffff, 4rpx 4rpx 8rpx 0rpx #ffffff inset, -4rpx -4rpx 8rpx 0rpx rgba(0,0,0,0.10) inset; 
  margin-right: 30rpx;
}
.step-t-r{
  font-size: 28rpx;
  font-weight: 400;
}
.step-t-ok{
	width: 36rpx;
	height: 36rpx;
	margin-left: 10rpx;
	image{
		width: 36rpx;
		height: 36rpx;
	}
}
.step-bot{
  margin-left: 100rpx;
  width: 144rpx;
  height: 56rpx;
  line-height: 56rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  background: #f0f0f3;
  border-radius: 66rpx;
  box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(174,174,192,0.40), -2rpx -2rpx 6rpx 0rpx #ffffff; 
}
.w168.step-bot{
  width: 168rpx;
}
.sub{
  width: 750rpx;
  height: 188rpx;
  view{
	  width: 670rpx;
	  height: 88rpx;
	  margin: 0 auto;
	  line-height: 88rpx;
	  text-align: center;
	  color: #808b9f;
	  font-size: 32rpx;
	  font-weight: 500;
	  margin: 0 auto;
	  background: #f0f0f3;
	  border: 2rpx solid #808b9f;
	  border-radius: 60rpx;
	  box-shadow: 10rpx 10rpx 40rpx 0rpx rgba(174,174,192,0.50), -10rpx -10rpx 40rpx 0rpx #ffffff; 
  }
}
.index-upload{
  width: 630rpx;
  height: 150rpx;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}
.upload-icon{
  width: 148rpx;
  height: 148rpx;
  background: #f0f0f3;
  border-radius: 20rpx;
  box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(174,174,192,0.40), -2rpx -2rpx 6rpx 0rpx #ffffff; 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30rpx;
}
.icon-text{
  width: 132rpx;
  height: 132rpx;
  background: #f0f0f3;
  border-radius: 16rpx;
  box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(174,174,192,0.20) inset, -2rpx -2rpx 2rpx 0rpx rgba(255,255,255,0.70) inset; 
  text-align: center;
  line-height: 132rpx;
  font-size: 80rpx;
  color: #A3ADB2;
}
.upload-r{
  height: 150rpx;
  padding-top: 40rpx;
}
.r-top{
  font-weight: 400;
  font-size: 28rpx;
  color: #b1b3b6;
  margin-bottom: 20rpx;
}
.upload-img{
	width: 132rpx;
	height: 132rpx;
	position: absolute;
	top: 16rpx;
	left: 16rpx;
	z-index: 99;
	background: #f0f0f3;
	.img-top{
		width: 132rpx;
		height: 132rpx;
		background: #f0f0f3;
		border-radius: 16rpx;
		box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(174,174,192,0.20) inset, -2rpx -2rpx 2rpx 0rpx rgba(255,255,255,0.70) inset; 
	}
	.upload-close{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 8rpx;
		top: 0;
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
}
.index-shenqing{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 630rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #808b9f;
	margin-bottom: 40rpx;
	.shouquan-l{
		// margin-right: 100rpx;
	}
	.shouquan-r{
		width: 220rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background: #f0f0f3;
		border-radius: 66rpx;
		box-shadow: 3rpx 3rpx 6rpx 0px rgba(174,174,192,0.40), -2rpx -2rpx 6rpx 0rpx #ffffff; 
	}
}
.upload-sub{
		position: absolute;
		bottom: 100rpx;
		left: 40rpx;
		width: 670rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #808b9f;
		background: #f9f9f9;
		border: 2rpx solid #808b9f;
		border-radius: 60rpx;
		box-shadow: 10rpx 10rpx 40rpx 0rpx rgba(174,174,192,0.50), -10rpx -10rpx 40rpx 0rpx #ffffff; 
}
.wait{
	height: 100%;
	 background: #F0F0F3;
	 padding-top: 40rpx;
	.wait-img{
		margin: 0 auto;
		width: 540rpx;
		height: 540rpx;
		margin-bottom: 20rpx;
		image{
			width: 540rpx;
			height: 540rpx;
		}
	}
	.wait-text{
		width: 400rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #292e30;
		text-align: center;
		margin: 0 auto;
	}
	.wait-bot{
		width: 750rpx;
		position: fixed;
		bottom: 60rpx;
		color: #677278;
		font-size: 28rpx;
		text-align: center;
	}
}
.success{
	height: 100%;
	background: #F0F0F3;
	padding-top: 40rpx;
	.success-img{
		margin: 0 auto;
		width: 540rpx;
		height: 540rpx;
		margin-bottom: 20rpx;
		image{
			width: 540rpx;
			height: 540rpx;
		}
	}
	.success-text{
		width: 700rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #292e30;
		text-align: center;
		margin: 0 auto;
		margin-bottom: 80rpx;
	}
	.success-user{
		font-size: 28rpx;
		color: #292e30;
		text-align: center;
	}
	.success-btn{
		width: 670rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		bottom: 80rpx;
		left: 40rpx;
		color: #808b9f;
		font-size: 32rpx;
		text-align: center;
		background: #f9f9f9;
		border: 2rpx solid #808b9f;
		border-radius: 60rpx;
		box-shadow: 10rpx 10rpx 40rpx 0rpx rgba(174,174,192,0.50), -10rpx -10rpx 40rpx 0rpx #ffffff; 
	}
}
.saveimg{
	width: 620rpx;
	height: 740rpx;
	padding: 60rpx;
	padding-bottom: 0;
	.imgCode{
		width: 500rpx;
		height: 500rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	.img-text{
		font-size: 32rpx;
		line-height: 32rpx;
		color: #677278;
		text-align: center;
		margin-bottom: 20rpx;
	}
}

.copybtn
{
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	background: #f9f9f9;
	border: 2rpx solid #808b9f;
	font-size: 26rpx;
	margin: 20rpx auto;
	width: 200rpx;
	border-radius: 10rpx;
}


.h5urlcss
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 150rpx;
}